<template>
	<view class="page">
		<image style="width: 750upx;" mode="widthFix" src="/static/icons/invite-logo.png"></image>
		<view @click="handleInvite" class="fix-button huxi">邀请好友</view>
		<view class="qrcode">
			<tki-qrcode
				v-if="ifShow"
				cid="qrcode1"
				ref="qrcode"
				:val="val"
				:size="size"
				:unit="unit"
				:background="background"
				:foreground="foreground"
				:pdground="pdground"
				:icon="icon"
				:iconSize="iconsize"
				:lv="lv"
				:onval="onval"
				:loadMake="loadMake"
				:usingComponents="true"
				@result="qrR"
			/>
		</view>
		<view class="tip">截图分享给好友领奖励</view>
	</view>
</template>

<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import { mapState } from 'vuex';
export default {
	components: {
		tkiQrcode
	},
	data() {
		return {
			ifShow: false,
			val: 'http://h5.jinzhuyb.com', // 要生成的二维码值
			size: 400, // 二维码大小
			unit: 'upx', // 单位
			background: '#ffffff', // 背景色
			foreground: '#000000', // 前景色
			pdground: '#0055ff', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: true, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: '' // 二维码生成后的图片地址或base64};
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onShow() {
		this.val = 'http://h5.jinzhuyb.com/#/?code=' + this.userInfo.mobilePhone || '';
		this.ifShow = true;
	},
	methods: {
		handleInvite() {
			plus.share.sendWithSystem(
				{
					content: `我的推广码是：${this.userInfo.mobilePhone || ''}，快来一起玩~`,
					href: 'http://h5.jinzhuyb.com/#/?code=' + this.userInfo.mobilePhone || ''
				},
				function() {
					console.log('分享成功');
				},
				function(e) {
					console.log('分享失败：' + JSON.stringify(e));
				}
			);
		},
		qrR(e) {
			console.log(e);
		}
	}
};
</script>

<style scoped lang="scss">
.page {
	font-size: 0;
	position: relative;
}
.fix-button {
	height: 100rpx;
	width: 400rpx;
	text-align: center;
	position: absolute;
	left: 169rpx;
	font-size: 36rpx;
	color: #ffffff;
	top: 887rpx;
}
.qrcode {
	position: absolute;
	left: 169rpx;
	width: 400upx;
	height: 400upx;
	top: 1038rpx;
}
.tip {
	position: absolute;
	text-align: center;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 1468rpx;
	color: #a0a0a0;
	font-size: 20upx;
}
</style>
